<template>
	<view class="page h-100">
		<navHead :datas="headData"></navHead>
		<view class="content_box">
			<view class="formBox pd-30">
				<view class="item bd-r20 flex">
					<view class="label">收件人</view>
					<view class="inputBox flex"><input class="uni-input" v-model="form.name" focus placeholder="" />
					</view>
				</view>
				<view class="item bd-r20 flex">
					<view class="label">手机号</view>
					<view class="inputBox flex">
						<view class="quhao fw-800 flex mr-10" @click="">
							+{{ form.code }}
							<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png"
								mode="aspectFit" />

						</view>
						<!-- 地区 -->
						<!-- <picker mode="region" :value="cityList" @change="bindRegionChange" @bindcancel="bindcancel">
							<view class="picker">
							</view>
						</picker> -->


						<input class="uni-input" v-model="form.phoneNumber" focus placeholder="" @blur="blur" />
					</view>
					
				</view>
				<view class="ft-22 ml-10 mt-4" style="color:#FF0000" v-show="!phonemsg">请输入正确手机号</view>
				<view class="addressBox pd-20 bd-r20">
					<text class="ft-22 c-99">暂不支持港澳台及海外地区</text>
					<view class="addressBox_model mt-20">
						<view class="addressBox_item flex">
							<view class="label">所在地区</view>
							<picker mode="region" :value="cityList" @change="bindRegionChange" @bindcancel="bindcancel"
								style="width: 100%;">
								<view class="picker ft-24 c-66 flex-bwt">
									{{ form.addressStr || '请选择' }}
									<image class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
										mode="aspectFit" />
								</view>
							</picker>
						</view>
						<view class="addressBox_item">
							<textarea class="textarea bd-r20" maxlength="-1" v-model="form.addressMsg" placeholder="详细地址"
								placeholder-class="textarea-placeholder" @input="" />
						</view>
					</view>
				</view>
				<view class="default_box ft-24 c-33 pd-20 bd-r20 mt-20 flex-bwt">
					<view class="fw-800">
						设为默认地址
						<view class="c-99 fw-400 mt-10">选择收件地址时会优先该地址</view>
					</view>
					<view class="c-99">
						<CustomSwitch v-model="form.detault" @change="handleSwitchChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn_box flex-center">
			<view class="btn bd-r20" @click="submitInfo">确认</view>
		</view>
	</view>
	<!-- 区号 -->
	<u-popup :show="showPup" @close="closePopup" :round="20">
		<!-- 弹窗标题与关闭按钮 -->
		<view class="popup-header">
			<text @click="closePopup">取消</text>
			<text @click="submit">确定</text>
		</view>
		<picker-view :indicator-style="`height:50px;`" :value="phoneIndex" @change="bindPickerChange"
			class="picker-view">
			<picker-view-column style="height: 100%;">
				<view class="item" v-for="(item, index) in phoneCode" :key="index">
					{{ item.name }}
				</view>
			</picker-view-column></picker-view>
	</u-popup>

</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import CustomSwitch from '@/components/comSwith.vue'
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import { getCurrentInstance } from 'vue';

let headData = reactive({
	color: '#fff',
	title: '新增收件地址'
})
const form = ref({
	name: '',
	code: 86,
	phoneNumber: '',
	address: [],
	addressStr: '',
	addressMsg: '',
	detault: false
})
const phonemsg = ref(true)

const blur = () => {
	phonemsg.value = /^1[3-9]\d{9}$/.test(form.value.phoneNumber)

}
const validateForm = () => {
	const values = form.value;
	// 定义校验规则
	const rules = {
		name: (v) => typeof v === 'string' && v.trim().length > 0, // 非空字符串
		code: (v) => typeof v === 'number' && v !== 0, // 非零数字
		phoneNumber: (v) => typeof v === 'string' && v.trim().length > 0, // 非空字符串
		address: (v) => Array.isArray(v) && v.length > 0, // 非空数组
		addressMsg: (v) => typeof v === 'string' && v.trim().length > 0, // 非空字符串
		
	};
	// 遍历所有字段
	return Object.entries(rules).every(([key, validate]) => {
		const isValid = validate(values[key]);
		return isValid;
	});
};


const { proxy } = getCurrentInstance()
const submitInfo = () => {
	let _title = '提交成功'
	let flag = true
	if (validateForm()) {
		_title = '提交成功'
		flag = true

	} else {
		_title = '请输入收件信息'
		flag = false
		uni.showToast({
			title: _title,
			icon: 'none',
			duration: 2000
		})
	}
	if (!flag || !phonemsg.value) return

	var formData = {
		is_sub: 1,
		id: id.value,
		name: form.value.name,
		phone: form.value.phoneNumber,
		area: form.value.address,
		addr: form.value.addressMsg,
		is_default: form.value.detault ? 1 : 0
	}
	utils
		.request(
			api.editAddress, formData,
			"post"
		)
		.then((res) => {
			uni.showToast({
				title: '操作成功',
				icon: 'none',
				duration: 2000
			})
			setTimeout(() => {
				getApp().globalData.shouldRefresh = true;
				const eventChannel = proxy.getOpenerEventChannel();
				eventChannel.emit('getListApi');
				uni.navigateBack()
			}, 2000)
		});

}
const handleSwitchChange = (value) => {
	console.log('开关状态:', value)
	form.value.detault = value
}
const showPup = ref(false)
let cityList = reactive([])
const bindRegionChange = (e) => {
	cityList = e.detail.value
	console.log('cityList', cityList)
	form.value.addressStr = cityList.join('-')
	form.value.address = cityList
	console.log('form', form.value)
}
const openPhone = () => {
	showPup.value = true
}
const phoneIndex = ref(0)
const bindPickerChange = (e) => {
	phoneIndex.value = e.detail.value

}
// 确认选择
const submit = () => {
	const selected = phoneCode[phoneIndex.value].code;
	form.value.code = selected

	closePopup();
};
// 关闭弹窗
const closePopup = () => {
	showPup.value = false

};

const id = ref('')
onLoad((option) => {
	id.value = option?.id || ''
	if (id.value) {
		headData.title = '编辑收件地址'
	} else {
		headData.title = '新增收件地址'
	}
	if (id.value) {
		utils
			.request(
				api.editAddress, {
				id: id.value
			},
				"post"
			)
			.then((res) => {
				var resData = res.data.info

				form.value.name = resData.name
				form.value.phoneNumber = resData.phone
				form.value.address = resData.area
				form.value.addressStr = resData.area.join('-')
				form.value.addressMsg = resData.addr
				form.value.detault = resData.is_default == 1 ? true : false
			});
	}
})
const phoneCode = reactive([{
	name: '中国大陆+86',
	code: 86
},
{
	name: '中国香港+852',
	code: 852
},
{
	name: '中国澳门+853',
	code: 853
},
{
	name: '中国台湾+886',
	code: 886
},
])
</script>

<style lang="scss" scoped>
.content_box {}

.formBox {
	.item {
		width: 100%;
		flex-shrink: 0;
		background-color: #F8F8F8;
		height: 74rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.label {
			box-sizing: border-box;
			width: 140rpx;
			border-right: 2rpx solid #F1F1F1;
			font-size: 24rpx;
			color: #333;
			padding-left: 20rpx;
			font-weight: 800;
		}

		.inputBox {
			padding-left: 20rpx;
			font-size: 24rpx;
			height: 100%;

			.quhao {
				height: 100%;

				.icons {
					width: 34rpx;
					height: 20rpx;
					margin-top: 4rpx;
				}

			}

			:deep(.uni-input) {
				font-size: 24rpx;
				color: #666;
				flex: 1;
			}
		}
	}



	.addressBox {
		background-color: #F8F8F8;

		.addressBox_model {
			border-top: 2rpx solid #F1F1F1;
			box-sizing: border-box;

			.addressBox_item {
				padding: 20rpx 0 0;

				:deep(.textarea) {
					height: 150rpx;
					background-color: #fff;
					width: 100%;
					padding: 20rpx;
					font-size: 24rpx;
					color: #666;
					box-sizing: border-box;

				}

				.label {
					box-sizing: border-box;
					width: 140rpx;
					border-right: 2rpx solid #F1F1F1;
					font-size: 24rpx;
					color: #333;
					font-weight: 800;
				}

				uni-picker {
					width: 100%;
					box-sizing: border-box;
				}

				.picker {
					width: 100%;
					padding: 0 0 0 20rpx;
					box-sizing: border-box;

				}
			}


		}
	}

	.default_box {
		background: linear-gradient(to bottom, #FBFFDF, #F8F8F8);
	}


}

/* 头部与关闭按钮 */
.popup-header {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
}

.btn_box {
	background-color: #F8F8F8;
	border-top: 2rpx solid rgb(235, 235, 235);
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 160rpx;
	padding: 20rpx 30rpx 0;
	box-sizing: border-box;
	align-items: flex-start;

	.btn {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		background-color: #333;
		color: #DBF046;
	}
}

.picker-view {
	width: 100%;
	height: 400rpx;
	margin-top: 20rpx;

	.item {
		line-height: 100rpx;
		text-align: center;


	}


}
</style>